<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
	<title>Document</title>
	<style>
		html{
				font-size: 100px;
	    		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	    		height: 100%;
			}
			body{
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	    		font-size: 14px;
	    		color: #333333;
	    		height: 100%;
	    		background-color: #ffffff;
	    		overflow:-Scroll;
	    		overflow-x:hidden;
	    	}

		    /*清除外边距*/
		    body,
		    h1,
		    h2,
		    h3,
		    h4,
		    h5,
		    h6,
		    hr,
		    p,
		    blockquote,
		    figure,
		    /*结构元素*/

		    dl,
		    dt,
		    dd,
		    ul,
		    ol,
		    li,
		    /*列表元素*/

		    fieldset,
		    lengend,
		    button,
		    input,
		    textarea,
		    /*表单元素*/

		    th,
		    td,
		    /*表格元素*/

		    pre
		    /*文本格式元素*/

		    {
		      margin: 0;
		    }
		    /*清除内边距*/

		    ul,
		    ol,
		    menu {
		      padding: 0;
		    }
		    /*重置列表元素*/

		    ul,
		    li,
		    ol {
		      list-style: none;
		    }
		    /*将字体扶正*/

		    address,
		    cite,
		    dfn,
		    em,
		    var {
		      font-style: normal;
		    }
		    /*清下划线*/

		    a {
		      text-decoration: none;
		      color: black;
		    }
		    /*鼠标略过a标签，显示下划线*/

		    a:hover {
		      /*text-decoration: underline;*/
		    }
		    /*清浮动*/

		    .clear:after {
		      content: '';
		      display: block;
		      clear: both;
		    }


</head>
<body>
	 <div class="login">
    <header>
          <a href ="http://localhost:8080/#/home"><span class="icon">&#xe6b0;</span></a>       
          <h1>登陆</h1>
    </header>
    <div class="main">
        <div class="log_type">
            <span class="user_icon">&#xe60d;</span>
            <input type="text" placeholder="手机号/邮箱/用户名" name class="userName" />
            <p class="name_empty"></p>
        </div>
        <div class="log_type">
            <span class="pas_icon">&#xe60a;</span>
            <input type="password" placeholder="密码" name class="passWord" />
            <p class="pasword_empty"></p>
        </div>
        <div class="login_foo" >
            <a href="http://localhost:8080/#/mine">登陆</a>
        </div>
    </div>
  </div>
</body>
 <script type="text/javascript">
	(function(window){
		//获取当前浏览器窗口
		var width = document.documentElement.clientWidth || document.body.clientWidth;
		console.log( width )
		//设置根节点的font-size
		document.documentElement.style.fontSize = width / 10 + "px";
		//当窗口大小变化时触发resize事件
		window.onresize = function(){
			//设置根节点的font-size
			document.documentElement.style.fontSize = (document.documentElement.clientWidth || document.body.clientWidth ) / 10 + "px"
		}
	})(window);
	</script>
	<script>
			// 验证用户名
			var uname = document.getElementsByClassName('userName')[0];
			var userTxt=document.getElementsByClassName('name_empty')[0];
			// 验证用户名函数  （用户名要求：中文、英文、数字_组成，4-20个字符 ）
			function checkUser(){
				// 非空验证
				if(uname.value.trim()==""||uname.value==null){
					userTxt.innerHTML="用户名不能为空";
					userTxt.style.color="red";
					return false;
				}
				// 正则验证用户名
				var reg=/^[\w\u2E80-\u9FFF]{4,20}$/;
				if(!reg.test(uname.value)){
					userTxt.innerHTML="用户名格式不正确";
					userTxt.style.color="red";
					return false;
				}
				userTxt.innerHTML="正确";
				userTxt.style.color="green";
				return true;
		}
		uname.onblur=checkUser;
		uname.onfocus=function(){
			userTxt.innerHTML="(中文、英文、数字_组成，4-20个字符)";
			userTxt.style.color='gray';
		}


// 验证密码   	密码要求：英文、数字、符号（%&@#!）组成，6-20个字符
var pwd = document.getElementsByClassName('passWord')[0],
 pwdTxt=document.getElementsByClassName('pasword_empty')[0];
// 验证密码函数
function checkPwd(){
	// 非空
	if(pwd.value.trim()==""||pwd.value==null){
		pwdTxt.innerHTML="密码不能为空";
		pwdTxt.style.color="red";
		return false;
	}
	// 正则
	var reg=/^([0-9a-zA-Z%&@#!]){6,20}$/;
	if(!reg.test(pwd.value)){
		pwdTxt.innerHTML="密码位数不合法或者包含非法字符";
		pwdTxt.style.color="red";
		return false;
	}
	pwdTxt.innerHTML="密码设置成功";
	pwdTxt.style.color="green";
	return true;
}

pwd.onblur=checkPwd;
pwd.onfocus=function(){
	pwdTxt.innerHTML="(请输入密码，英文、数字、符号（%&@#!）组成，6-20个字符";
	pwdTxt.style.color='gray';
}

var form = document.getElementsByClassName('login_foo')[0];

form.onsubmit=function(){
	if(!checkUser()||!checkPwd()){
		window.location.href = "http://localhost:8080/#/mine";
	}else{
		window.location.href = "http://localhost:8080/#/mine";
	}
}	
	</script>
</html>